<template>
    <div class="laayout-header">
        <div class="el-header-left">
            <h2>叩丁狼商品管理系统</h2>
            <el-icon size="24px">
                <Menu />
            </el-icon>
        </div>
        <div class="el-header-right">
            <!-- 下拉菜单 -->
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    admin
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="退出登录">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup lang="ts">
// 下拉菜单
import { ArrowDown, Menu } from '@element-plus/icons-vue'
// 路由
import Cookies from 'js-cookie'
import { useRouter } from 'vue-router'
let router = useRouter();
// 点击下拉菜单项
const handleCommand = (command: string | number | object) => {
    console.log(command);
    // 删除cookie 返回登录页


    Cookies.remove('token')
    // 跳转回login页
    setTimeout(() => {
        router.push('/login')
    }, 1000)
}
</script>

<style lang="scss" scoped>
// 头部
.laayout-header {
    background-color: #409eff;
    height: 70px;
    color: #fff;
    display: flex;
    justify-content:space-between;
    align-items: center;
    // margin:0 20px;
    padding:0 10px ;

    // 头部左
    .el-header-left {
        display: flex;
        justify-content: space-between;
        align-items: center;

        h2 {
            font-size: 22px;
            margin-right: 10px;
        }

        .el-icon {}
    }

    // 头部右
    .el-header-right {
        .example-showcase .el-dropdown-link {
            cursor: pointer;
            color: var(--el-color-primary);
            display: flex;
            align-items: center;
        }
        .el-dropdown-link{
            color:#fff;
            font-size:16px;
        }

        .el-dropdown {
            cursor: pointer;
        }
    }
}
</style>